<template>
  <q-slide-item
    @left="onEntrySlideLeft"
    @right="onEntrySlideRight"
    :id="`id-${entry.id}`"
    :class="entry.paid ? useLightOrDark('bg-grey-5', 'bg-grey-7') : ''"
  >
    <template #right>
      <q-icon name="delete" />
    </template>
    <template #left>
      <q-icon name="done" />
    </template>
    <q-item>
      <!-- 名称 -->
      <q-item-section>
        <q-item-label
          class="text-weight-bold"
          :class="[useAmountColor(entry.amount), { 'text-strike': entry.paid }]"
        >
          <div>
            <span>
              {{ entry.name }}
              <q-popup-edit
                @save="(newvalue) => onEntryUpdate({ name: newvalue })"
                :model-value="entry.name"
                v-slot="scope"
                auto-save
                buttons
                :cover="false"
                :offset="[16, 16]"
                label-set="保存"
                label-cancel="取消"
                max-width="300px"
                :color="$q.dark.isActive ? 'white' : 'primary'"
                anchor="top left"
              >
                <q-input
                  v-model="scope.value"
                  input-class="text-weight-bold letter-spacing-none mt--6px"
                  dense
                  autofocus
                  v-select-all
                  @keyup.enter="scope.set"
                />
              </q-popup-edit>
            </span>
          </div>
        </q-item-label>
      </q-item-section>
      <!-- 金额 -->
      <q-item-section side>
        <q-item-label :class="[useAmountColor(entry.amount)]">
          <span class="text-weight-bold" :class="{ 'text-strike': entry.paid }">
            {{ useAmountFormat(entry.amount) }}
          </span>
          <q-popup-edit
            @save="
              (newvalue) => onEntryUpdate({ amount: parseFloat(newvalue) })
            "
            :model-value.number="entry.amount"
            auto-save
            buttons
            v-slot="scope"
            :cover="false"
            :offset="[16, 16]"
            label-set="保存"
            label-cancel="取消"
            :color="$q.dark.isActive ? 'white' : 'primary'"
            anchor="top left"
          >
            <q-input
              v-model="scope.value"
              type="number"
              dense
              autofocus
              v-select-all
              input-class="text-weight-bold letter-spacing-none text-right"
              @keyup.enter="scope.set"
            />
          </q-popup-edit>
        </q-item-label>
        <q-chip
          v-if="settingsStore.settings.showRunningTotal"
          :class="useAmountColor(entriesStore.runningTotal[index] as number)"
          outline
          dense
          size="10px"
        >
          {{ useAmountFormat(entriesStore.runningTotal[index] as number) }}
        </q-chip>
      </q-item-section>
      <!-- 排序按钮 -->
      <q-item-section v-if="entriesStore.options.sort" side>
        <q-icon
          class="handle-sort"
          :color="$q.dark.isActive ? 'white' : 'primary'"
          name="format_line_spacing"
        />
      </q-item-section>
    </q-item>
  </q-slide-item>
</template>

<script setup lang="ts">
import {
  useAmountColor,
  useAmountFormat,
  useLightOrDark,
} from "src/hooks/useCurrencify";
import { useEntriesStore } from "src/stores/storeEntries";
import { useSettingsStore } from "src/stores/storeSettings";
import { useQuasar } from "quasar";
import vSelectAll from "src/directives/directiveSelectAll";
import type {
  entriesProps,
  updateEntryProps,
} from "stores/storeEntries/typing";
import type { QSlideItem } from "quasar";

defineOptions({
  name: "Entry",
});

const props = defineProps<{
  entry: entriesProps;
  index: number;
}>();

const $q = useQuasar();
const entriesStore = useEntriesStore();
const settingsStore = useSettingsStore();

// 左滑回调
const onEntrySlideLeft = ({ reset }: { reset: QSlideItem["reset"] }) => {
  entriesStore.updateEntrie(props.entry.id, { paid: !props.entry.paid });
  reset();
};
// 右滑动回调
const onEntrySlideRight = ({ reset }: { reset: QSlideItem["reset"] }) => {
  if (settingsStore.settings.promptToDelete) {
    $q.dialog({
      title: "删除记录",
      class: "no-shadow",
      message: `
    你确定要删除一下条目吗？<br>
    <strong class="${useAmountColor(props.entry.amount)}">
      ${props.entry.name} : ${useAmountFormat(props.entry.amount)}
    </strong>
    <br>
    <span class="text-caption text-grey-6">删除后无法恢复，请谨慎操作</span>
    `,
      html: true,
      cancel: {
        label: "取消",
        color: "primary",
      },
      ok: {
        label: "删除",
        color: "negative",
      },
      persistent: true,
    })
      .onOk(() => {
        // 删除条目
        entriesStore.deleteEntrie(props.entry.id);
      })
      .onCancel(() => {
        // 取消操作
        reset();
      });
  } else {
    // 直接删除条目
    entriesStore.deleteEntrie(props.entry.id);
  }
};

const onEntryUpdate = (data: updateEntryProps) => {
  // 更新条目
  entriesStore.updateEntrie(props.entry.id, data);
};
</script>
